<template>
    <footer>
           <ul>
                <li>
                    <a href="#" class="on">
                        <i class="iconfont icon-shouye f18"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                      <a href="#" class="on">
                        <i class="iconfont icon-shouye f18"></i>
                        <span>搜索</span>
                    </a>
                </li>
                <li>
                      <a href="#" class="on">
                        <i class="iconfont icon-shouye f18"></i>
                        <span>我</span>
                    </a>
                </li>
           </ul>
      </footer>
</template>

<script>
export default {
  name: 'TabBar'
}
</script>

<style>
   footer{position: fixed;bottom:.625rem; /* 10/16 */width:100%;left:0;right:0;}
   footer ul{width:100%;height:1.875rem; /* 60/16 */display: flex;flex-direction: row;}
   footer ul li{width:33.33%;list-style-type: none;}
</style>
